<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环境配置 - OrientDirector</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .config-container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 600px;
            width: 100%;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .header h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 2rem;
        }
        
        .header p {
            color: #666;
            font-size: 1.1rem;
        }
        
        .status-card {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
            border-left: 4px solid #667eea;
        }
        
        .status-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .status-item:last-child {
            margin-bottom: 0;
        }
        
        .status-label {
            font-weight: 600;
            color: #333;
        }
        
        .status-value {
            color: #666;
            font-family: monospace;
            background: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.9rem;
        }
        
        .environment-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
        }
        
        .environment-badge.local {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .environment-badge.production {
            background: #e8f5e8;
            color: #388e3c;
        }
        
        .controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .control-btn {
            padding: 15px 20px;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .control-btn.local {
            background: #2196f3;
            color: white;
        }
        
        .control-btn.local:hover {
            background: #1976d2;
            transform: translateY(-2px);
        }
        
        .control-btn.production {
            background: #4caf50;
            color: white;
        }
        
        .control-btn.production:hover {
            background: #388e3c;
            transform: translateY(-2px);
        }
        
        .control-btn.refresh {
            background: #ff9800;
            color: white;
            grid-column: 1 / -1;
        }
        
        .control-btn.refresh:hover {
            background: #f57c00;
            transform: translateY(-2px);
        }
        
        .control-btn.back {
            background: #9e9e9e;
            color: white;
            grid-column: 1 / -1;
        }
        
        .control-btn.back:hover {
            background: #757575;
            transform: translateY(-2px);
        }
        
        .log-container {
            background: #1e1e1e;
            color: #00ff00;
            border-radius: 8px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            max-height: 200px;
            overflow-y: auto;
            margin-bottom: 20px;
        }
        
        .log-entry {
            margin-bottom: 5px;
        }
        
        .log-entry.info { color: #00bfff; }
        .log-entry.success { color: #00ff00; }
        .log-entry.warning { color: #ffa500; }
        .log-entry.error { color: #ff4444; }
        
        @media (max-width: 768px) {
            .controls {
                grid-template-columns: 1fr;
            }
            
            .config-container {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="config-container">
        <div class="header">
            <h1>🔧 环境配置</h1>
            <p>OrientDirector API环境切换工具</p>
        </div>
        
        <div class="status-card">
            <div class="status-item">
                <span class="status-label">当前环境:</span>
                <span class="environment-badge" id="environmentBadge">加载中...</span>
            </div>
            <div class="status-item">
                <span class="status-label">API基础URL:</span>
                <span class="status-value" id="apiBaseUrl">加载中...</span>
            </div>
            <div class="status-item">
                <span class="status-label">使用域名地址:</span>
                <span class="status-value" id="useDomainName">加载中...</span>
            </div>
            <div class="status-item">
                <span class="status-label">最后更新:</span>
                <span class="status-value" id="lastUpdate">--</span>
            </div>
        </div>
        
        <div class="controls">
            <button class="control-btn local" onclick="setEnvironment('local')">
                🏠 本地环境
            </button>
            <button class="control-btn production" onclick="setEnvironment('production')">
                🌐 生产环境
            </button>
            <button class="control-btn refresh" onclick="refreshStatus()">
                🔄 刷新状态
            </button>
            <button class="control-btn back" onclick="goBack()">
                ← 返回主页
            </button>
        </div>
        
        <div class="log-container" id="logContainer">
            <div class="log-entry info">[INFO] 环境配置工具已启动</div>
        </div>
    </div>

    <script>
        // 日志系统
        function addLog(message, type = 'info') {
            const logContainer = document.getElementById('logContainer');
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.className = `log-entry ${type}`;
            logEntry.textContent = `[${timestamp}] ${message}`;
            logContainer.appendChild(logEntry);
            logContainer.scrollTop = logContainer.scrollHeight;
        }
        
        // 获取API基础URL
        function getAPIBaseURL() {
            const usedomainname = localStorage.getItem('isUsedomainnameaddress') === 'true';
            return usedomainname ? 'https://spot.gitagent.io' : 'http://localhost:8001';
        }
        
        // 更新状态显示
        function updateStatusDisplay() {
            const useDomain = localStorage.getItem('isUsedomainnameaddress') === 'true';
            const apiUrl = getAPIBaseURL();
            const environment = useDomain ? 'production' : 'local';
            
            document.getElementById('environmentBadge').textContent = environment;
            document.getElementById('environmentBadge').className = `environment-badge ${environment}`;
            document.getElementById('apiBaseUrl').textContent = apiUrl;
            document.getElementById('useDomainName').textContent = useDomain;
            document.getElementById('lastUpdate').textContent = new Date().toLocaleString();
        }
        
        // 设置环境
        function setEnvironment(env) {
            const useDomain = env === 'production';
            localStorage.setItem('isUsedomainnameaddress', useDomain.toString());
            
            addLog(`环境已切换到: ${env}`, 'success');
            addLog(`API基础URL: ${useDomain ? 'https://spot.gitagent.io' : 'http://localhost:8001'}`, 'info');
            addLog('请刷新主页面以应用新配置', 'warning');
            
            updateStatusDisplay();
        }
        
        // 刷新状态
        async function refreshStatus() {
            addLog('正在刷新状态...', 'info');
            
            try {
                const apiUrl = getAPIBaseURL();
                const response = await fetch(`${apiUrl}/api/config/environment`);
                
                if (response.ok) {
                    const config = await response.json();
                    addLog(`服务器环境: ${config.environment}`, 'success');
                    addLog(`服务器API URL: ${config.api_base_url}`, 'info');
                    
                    // 检查本地配置与服务器配置是否一致
                    const localUseDomain = localStorage.getItem('isUsedomainnameaddress') === 'true';
                    if (localUseDomain !== config.use_domain_name) {
                        addLog('⚠️ 本地配置与服务器配置不一致', 'warning');
                    } else {
                        addLog('✅ 本地配置与服务器配置一致', 'success');
                    }
                } else {
                    addLog(`服务器响应错误: ${response.status}`, 'error');
                }
            } catch (error) {
                addLog(`连接服务器失败: ${error.message}`, 'error');
            }
            
            updateStatusDisplay();
        }
        
        // 返回主页
        function goBack() {
            window.location.href = 'index.html';
        }
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            addLog('正在加载环境配置...', 'info');
            updateStatusDisplay();
            
            // 自动刷新状态
            setTimeout(refreshStatus, 1000);
        });
    </script>
</body>
</html>
